<template>
  <div class="hello">
    <h1>msg</h1>
    <my-lit-component :msg="msg" :list.prop="list" :columns.prop="columns" :dataSource.prop="dataSource"></my-lit-component>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import './MyLitComponent'

const msg = ref('init msg111')
const list = ref([
  { type: 'text', content: 'message' },
  { type: 'table', content: 'columns-dataSource' },
  {
    type: 'text',
    render: () => <div className="custom-render-box">custom render</div>
  }
])
const columns = [
  {
    title: '标题',
    dataIndex: 'name',
    render: (text: any) => (
      <div>
        <h3>{text}</h3>
        <p>副标题</p>
      </div>
    )
  },
  {
    title: '大小',
    dataIndex: 'size'
  },
  {
    title: '所有者',
    dataIndex: 'owner'
  },
  {
    title: '更新日期',
    dataIndex: 'updateTime'
  }
]
const dataSource = [
  {
    key: '1',
    name: 'Semi Design 设计稿.fig',
    nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
    size: '2M',
    owner: '姜鹏志',
    status: 'success',
    updateTime: '2020-02-02 05:13',
    avatarBg: 'grey'
  },
  {
    key: '2',
    name: 'Semi Design 分享演示文稿',
    nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
    size: '2M',
    owner: '郝宣',
    status: 'pending',
    updateTime: '2020-01-17 05:31',
    avatarBg: 'red'
  },
  {
    key: '3',
    name: '设计文档',
    nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
    size: '34KB',
    status: 'wait',
    owner: 'Zoey Edwards',
    updateTime: '2020-01-26 11:01',
    avatarBg: 'light-blue'
  }
]
</script>
